<template>
<div>
    
  <div class="table-data">
      <div class="search-box">
      <el-button size="small" type="primary" @click="handleApply">申请开票</el-button>
      
    </div>
    <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      tooltip-effect="dark"
      ref="multipleTable"
      element-loading-spinner="el-icon-loading" :data="tableData" @selection-change="handleSelectionChange" :header-cell-style="headClass" style="width:100%" :height="tHeight" class="table-box">
      <el-table-column
      type="selection"
      width="50">
    </el-table-column>
      <el-table-column label="id" prop="id" width="100"></el-table-column>
      <el-table-column label="开票方" prop="apply_name" width="100px">平台</el-table-column>
      <el-table-column label="充值金额" prop="amount"></el-table-column>
      <el-table-column label="状态" prop="" width="180px">可开票</el-table-column>
      <el-table-column label="充值时间" prop="created_at"></el-table-column>
    </el-table>
    <el-button @click="toggleSelection()">取消选择</el-button>
    <div class="pages" ref="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog title="申请开票"
      :visible.sync="applyDialogVisible"
      width="30%">
      <div class="table-data">
        <el-form>
            <el-form-item label="发票种类：" label-width="100px">
                <el-radio-group v-model="applyForm.in_type">
                    <el-radio :label="1">普票</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="快递方式：" label-width="100px">
                <el-radio-group v-model="applyForm.postal_type">
                    <el-radio :label="1">自提</el-radio>
                    <el-radio :label="2">快递</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="发票抬头：" label-width="100px">
                <el-input width="300px" v-model="applyForm.in_title"></el-input>
            </el-form-item>
            <el-form-item label="纳税号：" label-width="100px">
                <el-input width="300px" v-model="applyForm.in_tax"></el-input>
            </el-form-item>
            <el-form-item label="对接人姓名：" label-width="100px">
                <el-input width="300px" v-model="applyForm.c_username"></el-input>
            </el-form-item>
            <el-form-item label="对接人电话：" label-width="100px">
                <el-input width="300px" v-model="applyForm.c_mobile"></el-input>
            </el-form-item>
            <el-form-item label="邮箱：" label-width="100px">
                <el-input width="300px" v-model="applyForm.c_email"></el-input>
            </el-form-item>
            <el-form-item v-if="applyForm.postal_type === 2" label="收件地址：" label-width="100px">
                <el-input width="300px" v-model="applyForm.c_address"></el-input>
            </el-form-item>
            <el-form-item label="开票备注：" label-width="100px">
                <el-input width="300px" v-model="applyForm.c_remark"></el-input>
            </el-form-item>
          <el-form-item label-width="170px">
            <el-button type="primary" size="small" @click="handleApplySubmit()">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

  </div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">

import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
import invoiceApi from "@/api/invoice";

@Component({
  components: { }
})
export default class invoiceApplyList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() bindData: any = [];
  @Provide() advertisers: any = [];
  @Provide() applyForm: any = {
        in_type:1,
        postal_type:1,
        in_title:'',
        in_tax:'',
        c_mobile:'',
        c_email:'',
        c_address:'',
        c_remark:'',
        c_username:''
  };
  @Provide() applyDialogVisible: Boolean = false;
  @Provide() multipleSelection: any = [];
  @Provide() searchData: any = {
    pageNum: 1
  };

  @Provide() formData: any = {
    id:"",
    advertisersName:"",
    advertisersKey: "",
    appid:""
  };
  @Provide() searchMap: {
    admin_name: string,
    content:string,
    title:string,
    begin_time:string,
    end_time:string,
  }={
    admin_name:'',
    content:'',
    begin_time:'',
    end_time:'',
    title: ''
  }
  created() {
    this.loadData();
  }
  loadData() {
    invoiceApi.merchantCanApplyList(this.page,this.size)
      .then((res: any) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        this.loading=false
      });
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }
  headClass() {return "text-align: center;background:#eef1f6;";}

    toggleSelection(rows) {
        
        if (rows) {
            
            rows.forEach(row => {
                (this.$refs.multipleTable as any).toggleRowSelection(row);
            });
        } else {
            (this.$refs.multipleTable as any).clearSelection();
        }
    }

    handleSelectionChange(val) {
        this.multipleSelection = val;
    }

    handleApply(){
        if(this.multipleSelection.length === 0){
            this.$message.error('请勾选需要开票的选项');
            return false;
        }
        
        this.applyDialogVisible = true;
        this.applyForm = {
            in_type:1,
            postal_type:1,
            in_title:'',
            in_tax:'',
            c_mobile:'',
            c_email:'',
            c_address:'',
            c_remark:'',
            c_username:''
        }
    }
    handleApplySubmit(){
        let applyIds: any = []
        this.multipleSelection.forEach((item:any) => {
            applyIds.push(item.id)
        })
        this.applyForm.apply_ids = applyIds.join(',')
        invoiceApi.merchantInvoiceApply(this.applyForm).then((res: any) => {
            const resp = res.data;
            if(resp.code !== 200){
                this.$message.error(res.msg)
                return false;
            }

            this.$message.success('申请成功');
            this.applyDialogVisible = false;
            this.loadData();
        })
    }
        
}
</script>

<style lang="scss" scoped>
.el-range-editor.el-input__inner{
  margin-right: 10px
}
</style>
